<template>
  <div class="role-mng">
    <Card dis-hover>
      <!-- 查询条件 -->
      <Row>
        <Form :model="params" inline :label-width="100">
          <Col :span="8">
            <FormItem label="角色编码：">
              <Input type="text" v-model="params.roleCode"/>
            </FormItem>
          </Col>
          <Col :span="8">
            <FormItem label="角色名称：">
              <Input type="text" v-model="params.roleName"/>
            </FormItem>
          </Col>
        </Form>
        <div style="position:relative; float:right;bottom:0px;">
          <Button type="primary" @click="handleQuery">查询</Button>
          <Button @click="reset">重置</Button>
        </div>
      </Row>
      <!-- 增加、批量处理命令 -->
      <Row>
        <Col :span="12">
          <Button type="primary" @click="showAdd">增加</Button>
        </Col>
      </Row>
    </card>
    <!-- 列表 -->
    <div class="view-table">
      <Table :data="tableData"
             :columns="tableColumns"
             size="small"
             highlight-row
             :loading="isLoading"
             @on-selection-change="select"
             ref="table">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" ghost size="small" style="margin-right: 10px" @click="showUpdate(row)">编辑</Button>
          <Dropdown :transfer="true" placement="bottom-start" @on-click="action">
            <Button type="text" size="small">
              更多
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem :name="'setAuth:' + row._index">角色授权</DropdownItem>
              <DropdownItem :name="'deleteOne:' + row._index">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
    </div>
    <!-- 分页 -->
    <div class="view-page">
      <Page :total="page.total"
            :current="page.currentPage"
            :page-size="page.pageSize"
            :page-size-opts="[10,20,50,100]"
            size="small"
            show-total
            show-elevator
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"/>
    </div>
    <Add :visible.sync="addFormVisible" @on-ok="handleQuery"></Add>
    <Update :visible.sync="updateFormVisible" :init-form-data="clickRow" @on-ok="handleQuery"></Update>
    <set-role-auth :visible.sync="setAuthVisible" :init-form-data="clickRow"></set-role-auth>
  </div>
</template>

<script>
  import Add from "./add"
  import Update from "./update"
  import {getPage, deleteRole} from "@/api/sys/role"
  import SetRoleAuth from "./setRoleAuth"

  export default {
    name: "RoleMng",
    components: {SetRoleAuth, Add, Update},
    data() {
      return {
        params: {
          roleCode: null,
          roleName: null
        },
        tableData: [],
        tableColumns: [
          {
            type: 'selection',
            width: '60'
          },
          {
            title: 'id',
            key: 'id'
          },
          {
            title: '角色编码',
            key: 'roleCode'
          },
          {
            title: '角色名称',
            key: 'roleName'
          },
          {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'center',
            fixed: 'right'
          }
        ],
        selection: [],
        clickRow: {},
        isLoading: false,
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 10
        },
        addFormVisible: false,
        updateFormVisible: false,
        setAuthVisible: false
      }
    },
    created() {
      this.query()
    },
    methods: {
      handleQuery() {
        this.page = {
          total: 0,
          currentPage: 1,
          pageSize: 10
        }
        this.query()
      },
      query() {
        const self = this
        self.isLoading = true
        let params = {
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize,
          roleCode: this.params.roleCode,
          roleName: this.params.roleName
        }
        getPage(params)
          .then((response) => {
            let result = response.data
            self.tableData = result.data
            self.page.total = result.total
            self.isLoading = false
          })
          .catch((err) => {
            self.isLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      select(selection) {
        this.selection = selection
      },
      pageChange(currentPage) {
        this.page.currentPage = currentPage
        this.query()
      },
      pageSizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.query()
      },
      reset() {
        this.params = {
          roleCode: null,
          roleName: null
        }
      },
      showAdd() {
        this.addFormVisible = true
      },
      showUpdate(row) {
        this.clickRow = row
        this.updateFormVisible = true
      },
      action(name) {
        if (name.indexOf('deleteOne') > -1) {
          let index = name.split(':')[1];
          this.deleteOne(index);
        } else if (name.indexOf('setAuth') > -1) {
          let index = name.split(':')[1];
          this.setAuth(index);
        }
      },
      deleteOne(index) {
        let self = this
        let row = this.tableData[index]
        this.$Modal.confirm({
          "title": "提醒",
          "content": "是否删除角色[" + row.roleName + "]?",
          "onOk": () => {
            let params = {
              id: row.id
            }
            deleteRole(params)
              .then(response => {
                self.handleQuery()
                self.$Message.success({
                  content: '删除角色成功'
                })
              })
              .catch((err) => {
                self.$Message.error({
                  content: err,
                  duration: 10,
                  closable: true
                })
              })
          },
          "onCancel": () => {
            self.$Message.success({
              content: '取消删除'
            })
          }
        })
      },
      setAuth(index) {
        let row = this.tableData[index]
        this.clickRow = row
        this.setAuthVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
